<template>
    <div class="card-box" style="margin-top: 60px;">
        <el-row>
            <el-col :md="10" :offset="7">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item
                        label="接口套装名称："
                        prop="name"
                    >
                        <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="接口套装编号："
                        prop="code"
                    >
                        <el-input v-model="ruleForm.code" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="接口调用密钥："
                        prop="miyao"
                    >
                        <el-input v-model="ruleForm.miyao" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>

</template>
<script>
    export default {
    data() {
      return {
        ruleForm: {
            name: '',
            code: '',
            miyao: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入接口套装名称', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入接口套装编号', trigger: 'blur' }
          ],
          miyao: [
            { required: true, message: '请输入接口调用密钥', trigger: 'blur' }
          ]
        }
      };
    },
    created() {
        this.getData()
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(111)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.$router.push({
                path: '/carrier_interface_sets'
            })
        },
        getData() {
            this.$axios.get(`/api/carriers/${this.$route.query.id}/edit`).then((res) => {
                this.ruleForm.name = res.data.name
                this.ruleForm.carrier_type = res.data.carrier_type
                this.ruleForm.contact_person = res.data.contact_person
                this.ruleForm.email = res.data.email
                this.ruleForm.phone_number = res.data.phone_number
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .select {
        width: 100%;
    }
</style>

